import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    View, Button, Image,
} from 'react-native';
import DeviceRn from '../Tools/device';
import Http from '../Tools/http.unite';
import { connect } from 'react-redux';
import Toast, { DURATION } from 'react-native-easy-toast';
import CountT from './count.time';
//导入action
import * as Action from './count.time.action';
import * as SHAction from '../ShowHistory/show.history.action';
import * as NIAction from '../NetInfo/net.info.action';
let DevWH = DeviceRn().getWidHig();
class HeaderTime extends Component {
    constructor() {
        super();
        this.type = 3;
        this.getData();
    }

    // 接收改变的props
    componentWillReceiveProps(nextProps) {
        if (nextProps.status == 'end') {
            this.getData(nextProps.data);
        }
        nextProps.nstatus=='wifi'?(this.getData(),this.props.dispatch(NIAction.NetType('auto'))):"";
       // nextProps.netInfo=='wifi'?console.log('sss'):"";
    }

    //获取数据
    getData(data = {}) {
        Http().httpPost('plan/prize', { type: this.type }).then(data => {
            let resPones = data.data;
            if (data.num != resPones.num) {
                this.props.dispatch(Action.updateData(resPones));
                this.props.dispatch(SHAction.updateData(resPones));
            }
        }).catch(err => {
            this.refs.toast.show('网络异常');
        })
    }

    render() {
        return (
            <View style={styles.container}>
                <Image source={require('../../assets/images/bg_02.png')} style={styles.bgImg} />
                <Text style={styles.top}>{this.props.data.num || '---'}期</Text>
                <View style={[styles.center, styles.middle]}>
                    <Text style={[styles.cacleFont, styles.cacle]}>{this.props.data.content[0] || '-'}</Text>
                    <Text style={styles.cacleFont}> + </Text>
                    <Text style={[styles.cacleFont, styles.cacle]}>{this.props.data.content[1] || '-'}</Text>
                    <Text style={styles.cacleFont}> + </Text>
                    <Text style={[styles.cacleFont, styles.cacle]}>{this.props.data.content[2] || '-'}</Text>
                    <Text style={styles.cacleFont}> = </Text>
                    <Text style={[styles.cacleFont, styles.Bcacle]}>{this.props.data.count || '-'}</Text>
                    <Text style={[styles.cacleFont, styles.sq, styles.sqf]}>{this.props.data.lefts[0] || '--'}</Text>
                    <Text style={[styles.cacleFont, styles.sq, styles.sqs]}>{this.props.data.lefts[1] || '--'}</Text>
                </View>
                <View style={[styles.center, styles.bottom]}>
                    <Text>{this.props.data.num1 || '---'}期倒计时</Text>
                    {/*   <Text style={styles.countT}>{this.props.data.countdown}</Text> */}
                    <CountT style={styles.countT}></CountT>
                </View>
                <Toast ref="toast" position="top" />
            </View>
        );
    }
};
//管理返回的store
function select(store) {
    return {
        status: store.countTime.status,
        data: store.countTime.data,
        nstatus: store.netInfo.status
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'flex-start',
        backgroundColor: '#fff',
        position: 'absolute',
        top: 0,
    },
    bgImg: {
        flex: 1,
        height: 160,
        resizeMode: 'stretch',
    },
    top: {
        position: 'absolute',
        fontSize: 16,
        lineHeight: 25,
        fontWeight: '500',
        top: 20,
    },
    center: {
        flex: 1,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        position: 'absolute',
    },
    middle: {
        top: 70,
    },
    bottom: {
        top: 115,
    },
    cacleFont: {
        textAlign: 'center',
        lineHeight: 24,
        width: 24,
        height: 24,
        fontSize: 16,
        overflow: 'hidden',
    },
    cacle: {
        color: '#fff',
        backgroundColor: '#ffc343',
        borderRadius: 12,
        borderWidth: 1,
        borderColor: '#ffc343',
    },
    Bcacle: {
        backgroundColor: '#ff6c3f',
        color: '#fff',
        borderRadius: 13,
        borderWidth: 3,
        borderColor: '#fddfb3',
        width: 26,
        height: 26,
        marginRight: 10,
    },
    sq: {
        color: '#fff',
        marginRight: 10,
        borderRadius: 4
    },
    sqf: {
        backgroundColor: '#cfa377',
    },
    sqs: {
        backgroundColor: "#00c6c4"
    },
    countT: {
        marginLeft: 10,
        color: '#4b5dc9',
        fontWeight: '500',
        width: 100,
    }
});
export default connect(select)(HeaderTime);